import { Popover, Tag } from 'antd'
import { Item } from '../../items/type'

interface Props {
  data: { item: Item; amount: number }[]
  limit?: number
}

export default ({ data: ts = [], limit = 3 }: Props) => (
  <span>
    {ts.length <= limit
      ? renderItemGroup(ts)
      : renderItemGroup(ts.slice(0, limit)).concat(renderMore(ts.slice(limit)))}
  </span>
)

const renderItemGroup = (ts: Props['data']) =>
  ts.map(({ item, amount }) => (
    <Tag key={item.id}>{`${item.title} (${amount})`}</Tag>
  ))

const renderMore = (ts: Props['data']) => (
  <Popover key="..." trigger="hover" content={renderItemGroup(ts)}>
    ...
  </Popover>
)
